<template>
    <!-- 历史会话 -->
    <div class="search-history-talk-table">
        <div class="search-talk-top">
            <el-input v-model="input" size="large" ref="inputRef" placeholder="用户姓名 \ 电话 \ 地址 \ 户号 \ 水表号" clearable @blur="handleSearch" @keyup.enter="handleSearch" @clear="handleClear"/>
            <el-button type="primary" :icon="Refresh" circle @click="getTableData" />
        </div>
        <div class="search-talk-bottom w-full" :class="{ 'with-drawer': drawer }">
            <el-table :data="tableData" v-loading="loading" style="width: 100%; height: 98%;" border 
                @row-click="rowClick" highlight-current-row
                :header-cell-style="{ whiteSpace: 'nowrap' }">
                <el-table-column type="index" label="序号" width="60" align="left"
                    header-align="center"></el-table-column>
                <el-table-column prop="session_code" label="会话编号" show-overflow-tooltip min-width="200"
                    header-align="center"></el-table-column>
                <el-table-column prop="contact_name" label="姓名" header-align="center" width="100"></el-table-column>
                <el-table-column prop="phone" label="电话" header-align="center" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" header-align="center" width="150"></el-table-column>
                <el-table-column prop="account_code" label="户号" header-align="center"></el-table-column>
                <el-table-column prop="meter_code" label="水表号" header-align="center" width="100"></el-table-column>
                <el-table-column prop="create_time" label="开始时间" header-align="center"
                    min-width="200"></el-table-column>
                <el-table-column prop="update_time" label="持续时间" header-align="center"
                    min-width="200"></el-table-column>
                <el-table-column prop="total_tokens" label="消费tokens" width="100"
                    header-align="center"></el-table-column>
            </el-table>
            <div class="flex" :class="drawer ? 'justify-center' : 'justify-end'">
                <el-pagination background style="text-align: center;margin-top: 25px;"
                    v-model:current-page="currentPage" :class="{ 'with-drawer': drawer }" v-model:page-size="pageSize"
                    :page-sizes="[15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
        </div>
        <el-drawer v-model="drawer" :modal="false" @close="onDrawerClose" :show-close=false :size="'40.1%'"
            modal-class="mask-layer" style="height: calc(100%-48px); top: 48px;mask-image: none;">
            <template #header>
                <h3 class="head-title">历史会话记录</h3>
                <el-button type="primary" :icon="ArrowRightBold" circle @click="onDrawerClose" />
            </template>
            <HistoryTalkInfo :session_id="sessionId" :session_show="true" />
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Refresh, ArrowRightBold } from '@element-plus/icons-vue';
import historyTalk from '../api/historyTalk'
import HistoryTalkInfo from '../components/HistoryTalkInfo.vue';
import { useRouter } from 'vue-router'
const input = ref('');
const hasToken = <string>localStorage.getItem('accessToken');
const loading = ref(false);

// 定义类型
interface createUserData {
    sessionId?: number | null,
};

const sessionId = ref<createUserData>({
    sessionId: 0
});

// 分页
const pageSize = ref(15);
const total = ref(0);
const currentPage = ref(1);

const handleSizeChange = (val: number) => {
    pageSize.value = val;
};

const handleCurrentChange = (val: number) => {
    currentPage.value = val;
};

const drawer = ref(false);

const inputRef =ref(null);
// 模拟数据
const tableData = ref([]);

// 点击表格行事件
const rowClick = (row) => {
    drawer.value = true;
    sessionId.value = row.session_id;
};
//关闭抽屉
const onDrawerClose = () => {
    drawer.value = false;
};

// 获取接口数据
// 定义类型
interface filterinterface {
    page?: string,
    page_size?: string | null,
    search?: string | null,
    invalid?: number | null
};
//定义传给后端的类型
const filterData = ref<filterinterface>({
    page: currentPage.value.toString(),
    page_size: pageSize.value.toString(),
    search: input.value,
    invalid: 2
});

// 监听分页和搜索输入的变化
watch([currentPage, pageSize], () => {
    filterData.value.page = currentPage.value.toString();
    filterData.value.page_size = pageSize.value.toString();
    // filterData.value.search = input.value;
    filterData.value.invalid = 0;
    getTableData();
});
const router = useRouter()
// 监听当前路由
watch(
    () => router.currentRoute.value,
    (newValue: any) => {
        drawer.value = false
    },
    { immediate: true }
)
// 处理模糊搜索
const handleSearch = () => {
    filterData.value.search = input.value;
    getTableData();
};
//清空输入框
const handleClear = () => {
    filterData.value.search = '';
    inputRef.value.blur(); // 让输入框失去焦点
    getTableData();
};
// 加载列表接口
const getTableData = () => {
    loading.value = true; // 开始加载
    historyTalk.getSessionList(hasToken, filterData.value).then(res => {
        // console.log('res=',res);
        
        tableData.value = res.data.list;
        total.value = res.data.total;
    }).finally(() => {
        loading.value = false; // 加载完成
    });
};
getTableData();
</script>

<style scoped>
.search-history-talk-table {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.search-history-talk-table /deep/ .is-leaf {
    background-color: var(--v-table-bg-color);
    color: var(--v-table-color);
    font-weight: bold;
}

.search-talk-top {
    margin-bottom: 10px;
}

.head-title{
    color: var(--v-session-hist);
}
.search-talk-bottom {
    height: calc(100% - 90px);
    transition: width 0.3s;
}

/* .el-pagination {
    float: right;
} */

::v-deep(.search-talk-top .el-input) {
    width: 260px;
    margin-right: 10px;
}

.search-talk-bottom.with-drawer {
    width: calc(60% - 100px) !important;
}

/* .el-pagination.with-drawer {
    float: left;
} */

::v-deep(.el-drawer__header) {
    margin-bottom: 10px;
}

::v-deep(.el-drawer__body) {
    overflow-y: hidden;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

::v-deep(.el-table .el-table__row:hover) {
    cursor: pointer;
}

::v-deep(.mask-layer) {
    position: static !important;
    /* position: absolute !important;
    top: 0;
    right: 0;
    width: 38%;
    height: 100%; */

}



::v-deep(.mask-layer>div) {
    top: 48px;
}

/* ::v-deep .el-table tbody tr:hover>td {
    background-color: #fffeac !important;
} */


/* ::v-deep .el-table__body tr.current-row>td {
    background-color: #c7e0e8 !important;
} */
</style>